import type { Size } from "@/plugins/element"

export const useAppStore = defineStore(
  "app",
  () => {
    //定义响应式状态
    const state = reactive({
      sidebar: {
        opened: true
      },
      size: "default" as Size,
      language: "zh-cn" as string // 语言
      // ...
      // theme
    })

    const sidebar = computed(() => state.sidebar)
    const toggleSidebar = () => {
      state.sidebar.opened = !state.sidebar.opened
    }

    const size = computed(() => state.size)
    const setSize = (size: Size) => {
      state.size = size
    }

    const language = computed(() => state.language)
    const setLanguage = (lang: string) => {
      state.language = lang
    }

    return {
      state,
      sidebar,
      toggleSidebar,
      size,
      setSize,
      language,
      setLanguage
    }
  },
  {
    //持久化配置
    persist: {
      storage: window.localStorage, //使用window.localStorage存储状态
      pick: ["state.sidebar", "state.size", "state.language"] //只持久化state.sidebar这个属性
    }
  }
)
